<template>
	<view>
		<!-- {{width}} -->
		<!-- <image src="http://img95.699pic.com/for_360_sitemap_imgs/003/00/53/64/57.jpg"></image> -->
		<!-- <canvas @click="click" 
		:style="{width:width+'px', height:height+'px'}" 
		canvas-id="firstCanvas" 
		id="firstCanvas"
		@touchmove="moveCanvas"
		@touchstart="canvasStart"
		@touchend="canvasEnd"
		></canvas> -->
		 <view style="width: auto;height: auto;overflow: scroll;">
			 <view class="imgOut" style="width: 200vw;height: 200vh;">
				 <image src="http://img95.699pic.com/for_360_sitemap_imgs/003/00/53/64/57.jpg"
				 mode="" style="width: 200vw;height: 200vh;"></image>
				  <view class="tag" v-for="i in list" :key="i.id"
				  @tap="clicks(i.id)"
				  :style="{'top': i.y.split('-')[0] + 'px', 'left': i.x.split('-')[0] + 'px'}"
				  >
				  {{i.name}}
				  </view>
			 </view>
			  
			 
		  </view>
	</view>
</template>

<script>
	import {mountainList} from './request.js'
	export default {
		data() {
			return {
				width:0,
				height:0,
				list: []
			}
		},
		// onReady() {
		// 	const ctx = uni.createCanvasContext('firstCanvas',this)
		// 	// let canvas = document.querySelector('#canvas');
		// 	// const ctx = canvas.getContext('2d');
		// 	// let w_h=new Promise((r,n)=>{
		// 	// 	uni.getImageInfo({
		// 	// 	        src: "https://p0.ssl.qhimgs1.com/sdr/400__/t0154338114a1484a4e.jpg",
		// 	// 	        success: (res) => {
		// 	// 	          // resolve(res);
		// 	// 			  console.log(res)
		// 	// 	        },
		// 	// 	        fail: (err) => {
		// 	// 	          // reject(err);
		// 	// 	        }
		// 	// 	});
		// 	// })
			
		// 	uni.getImageInfo({
		// 		src:'http://img95.699pic.com/for_360_sitemap_imgs/003/00/53/64/57.jpg',
		// 		success:(e)=>{
		// 			console.log(e.width,e.height,'22222222222222')
		// 			console.log(e,'计算宽高比例')
		// 			this.width=e.width
		// 			this.height=e.height
		// 			// 计算宽高比例
		// 			// that.ratio=data[0]/e.width
		// 			// console.log(that.ratio)
		// 			ctx.drawImage(e.path,0,0,e.width,e.height)
					
		// 			ctx.draw(true)		
		// 		},
		// 		fail(err){
		// 			console.log(err)
		// 		}
		// 	})
		// },
		mounted() {},
		onLoad() {
			this.getList()
		},
		methods: {
			clicks(id){
				uni.navigateTo({
					url:'./wishDetail?id=' + id
				})
			},
			getList () {
				mountainList().then(res => {
					console.log(res)
					if (res.data.code === 1) {
						this.list = res.data.data
						console.log(this.list)
					}
				})
			},
			//  移动canvas
			moveCanvas () {
				
			},
			// 开始触摸
			canvasStart () {
				
			},
			// 结束
			canvasEnd () {
				
			}
		}
	}
</script>

<style>
.imgOut{
	position: relative;
}
.tag{
	position: absolute;
	width: 170rpx;
	height: 82rpx;
	z-index: 99;
	color: #FA9700;
	font-size: 30rpx;
	line-height: 82rpx;
	background: url(../../static/images/wish/whiteBg.png) no-repeat;
	background-size: 170rpx 82rpx;
	text-align: center;
}
</style>
